<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染v-if</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="app">
    <!--app.awesome=false的时候看DOM都没有了，所以v-if是从根节点进行删除-->
    <div v-if="awesome">Vue is awesome!</div>
    <div v-else>这是v-else ：false</div>


    <div v-if="type==='A'">This is A</div>
    <div v-else-if="type==='B'">This is B</div>
    <!--app.type='C'-->
    <div v-else-if="type==='C'">This is C</div>
    <div v-else>Not A/B/C</div>
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            awesome:true,
            type:"A"
        },
        methods:{

        },
        computed:{

        },
    });
</script>
</body>
</html>
